﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>dataform</title>
                                                             
    <!-- WinJSContrib.Core references -->
    <script src="../../../scripts/jquery-2.1.1.js"></script>
    <script src="../../../scripts/winjscontrib/jquery.mcnext.WinJS.js"></script>
    <script src="../../../scripts/winjscontrib/mcnext.ui.utils.js"></script>

    <!-- WinJSContrib.DataForm references -->
    <link href="../../../scripts/tooltipster/tooltipster.css" rel="stylesheet" />
    <script src="../../../scripts/tooltipster/jquery.tooltipster.js"></script>
    <script src="../../../scripts/jquery.validate.js"></script>
    <link href="../../../css/winjscontrib/mcnext.ui.dataform.css" rel="stylesheet" />
    <script src="../../../scripts/winjscontrib/mcnext.ui.dataform.js"></script>

    <link href="dataform.css" rel="stylesheet" />
    <script src="dataform.js"></script>
</head>
<body>
    <div class="dataform fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Data forms</span>
            </h1>
            <div class="codelink" data-codepage="./pages/dataform/overview/dataform"><span class="symbol">&#xE160;</span><span class="text">show me the code !</span></div>
        </header>
        <section class="desc-screen" aria-label="Main content" role="main">
            <div class="bloc-description">
                <p>Data form is a very common pattern in apps, and especially in LOB apps.</p>
                <p>
                    This sample illustrate the features available in WinJSContrib around forms. You will find a small css framework for styling forms,
                    and a set of control and binding to wrap the necessary pieces like form validation.
                </p>
                <p>The DataForm control rely on jQuery validate for validation, and Tooltipster for displaying tooltips.</p>
            </div>
            <div class="bloc-content">
                <div class="split">
                    <div>
                        <form id="formHorizontal" class="mcn-dataform form-horizontal label140" data-win-control="MCNEXT.UI.DataForm">
                            <h2>horizontal form</h2>
                            <p>
                                <label>name</label>
                                <input name="name" type="text" data-win-bind="value: item.name MCNEXT.UI.DataFormBinding" required />
                            </p>
                            <p>
                                <label>gender</label>
                                <select name="gender" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding">
                                    <option value="male">male</option>
                                    <option value="female">female</option>
                                    <option value="unknown">unknown</option>
                                </select>
                            </p>
                            <p>
                                <label>gender</label>
                                <span class="controlgroup">
                                    <input type="radio" name="radiogender" id="male" value="male" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding" /> <label for="male">male</label><br />
                                    <input type="radio" name="radiogender" id="female" value="female" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding" /> <label for="female">female</label><br />
                                    <input type="radio" name="radiogender" id="unknown" value="unknown" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding" /> <label for="unknown">unknown</label><br />
                                </span>
                            </p>
                            <p>
                                <label>address</label>
                                <span class="controlgroup">
                                    <input name="street" type="text" data-win-bind="value: item.address.street MCNEXT.UI.DataFormBinding" required /><br />
                                    <span class="grid grid1-2">
                                        <input name="zipcode" type="number" class="col1" data-win-bind="value: item.address.zipcode MCNEXT.UI.DataFormBinding" required minlength="5" />
                                        <input name="city" type="text" class="col2" data-win-bind="value: item.address.city MCNEXT.UI.DataFormBinding" required />
                                    </span>
                                </span>
                            </p>
                            <p>
                                <label>description</label>
                                <textarea></textarea>
                            </p>
                            <p class="actions">
                                <button class="mcn-dataform-submit" data-win-bind="value: isValid MCNEXT.Bindings.enableIf">save</button>
                                <button class="mcn-dataform-cancel">cancel</button>
                            </p>
                        </form>
                    </div>
                    <div>
                        <form id="formVertical" class="mcn-dataform form-vertical" data-win-control="MCNEXT.UI.DataForm">
                            <h2>vertical form</h2>
                            <p>
                                <label>name</label>
                                <input name="name" type="text" data-win-bind="value: item.name MCNEXT.UI.DataFormBinding" required />
                            </p>
                            <p>
                                <label>gender</label>
                                <select name="gender" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding">
                                    <option value="male">male</option>
                                    <option value="female">female</option>
                                    <option value="unknown">unknown</option>
                                </select>
                            </p>
                            <p>
                                <label>gender</label>
                                <span class="controlgroup">
                                    <input type="radio" name="radiogender" id="male2" value="male" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding" /> <label for="male2">male</label><br />
                                    <input type="radio" name="radiogender" id="female2" value="female" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding" /> <label for="female2">female</label><br />
                                    <input type="radio" name="radiogender" id="unknown2" value="unknown" data-win-bind="value: item.gender MCNEXT.UI.DataFormBinding" /> <label for="unknown2">unknown</label><br />
                                </span>
                            </p>
                            <p>
                                <label>address</label>
                                <span class="controlgroup">
                                    <input name="street" type="text" data-win-bind="value: item.address.street MCNEXT.UI.DataFormBinding" required /><br />
                                    <span class="grid grid1-2">
                                        <input name="zipcode" type="number" class="col1" data-win-bind="value: item.address.zipcode MCNEXT.UI.DataFormBinding" required minlength="5" />
                                        <input name="city" type="text" class="col2" data-win-bind="value: item.address.city MCNEXT.UI.DataFormBinding" required />
                                    </span>
                                </span>
                            </p>
                            <p>
                                <label>description</label>
                                <textarea></textarea>
                            </p>
                            <p class="actions">
                                <button class="mcn-dataform-submit" data-win-bind="value: isValid MCNEXT.Bindings.enableIf">save</button>
                                <button class="mcn-dataform-cancel">cancel</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
